<template>
  <div class="mb-5" id="topic-home" :style="{minHeight: height+'px'}" v-loading="tipics.loading">
    <el-container style="justify-content: center;">
      <el-header class="topic-home-header">
        <div class="topic-home-search main-width">
          <el-input placeholder="请输入话题名称进行搜索" v-model="keywords" class="input-with-select" @keyup.enter.native="newSearch()">
            <el-button slot="append" icon="el-icon-search" @click="newSearch()"></el-button>
          </el-input>
          <el-button @click="releaseTopic">发新话题</el-button>
        </div>
        <div class="topic-home-type main-width">
          <el-radio-group v-model="type" >
            <el-radio-button label=""><span>综合</span></el-radio-button>
            <el-radio-button label="0D6E88FE7F3511E8AC3FFA7DEC4CE400"><span>技术请教</span></el-radio-button>
            <el-radio-button label="0D6E894F7F3511E8AC3FFA7DEC4CE400"><span>行业闲聊</span></el-radio-button>
            <el-radio-button label="0D6E89647F3511E8AC3FFA7DEC4CE400"><span>干货分享</span></el-radio-button>
            <el-radio-button label="0D6E89747F3511E8AC3FFA7DEC4CE400"><span>吐槽</span></el-radio-button>
            <el-radio-button label="0D6E89947F3511E8AC3FFA7DEC4CE400"><span>其他</span></el-radio-button>
          </el-radio-group>
        </div>
      </el-header>
      <el-container>
        <!-- <el-main > -->
          <div class="" style="width: 880px;margin-right: 100px;">
            <div style="text-align: center; padding: 15px;" v-show="tipics.rows.length === 0">暂无数据</div>
            <!-- <div class="" v-for="(item, index) in topices" :key="item.ctime"> -->
            <div v-for="item in tipics.rows" :key="item.ctime">

              <topic-card :topic="item" ></topic-card>
            </div>
            <!-- <el-button type="success fr width-200" style="margin: 20px 0;"
            plain round  @click="loadMore()" v-show="hasMore">查看更多</el-button> -->
            <el-button type="success fr width-200" style="margin: 20px 0;"
            plain round  @click="tipics.addLoad()" v-show="tipics.hasMore">查看更多</el-button>
          </div>
        <!-- </el-main> -->
        <el-aside width="280px" class="animated fadeInRightBig delay-2s">
          <recommend-topic></recommend-topic>
        </el-aside>
      </el-container>
    </el-container>

    <el-dialog title="创建话题" :visible.sync="show" width="800px" top="2vh" :close-on-click-modal="false" @close="dialogClose">
      <div class="width-full flex-row">
        <label class="ewai" style="margin-right: 38px;">标题图片</label>
        <file-upload
          ref="upload"
          :drag="true"
          :is-display="true"
          list-type="picture"
          :limit="1"
          accept="image/*, .jpg, .png, .jpeg"
          v-model="newTopic.topicLogo"
          class-name="upload-demo title-img"
        >
          <span>上传图片</span>
        </file-upload>
      </div>
      <div class="width-full flex-row" style="margin: 20px 0;">
        <label class="ewai" style="margin-right: 30px;">话题类型*</label>
        <div class="duigou-con-two" v-for="item in topicTypes" :key="item.id">
          <el-radio v-model="newTopic.topicTypeId" :label="item.id" border>{{item.name}}</el-radio>
        </div>
      </div>
      <div class="material-textfield green width-full">
        <input type="text" required v-model="newTopic.topicTitle" />
        <label data-content="话题名称*"></label>
      </div>
      <div class="">
        <label class="ewai" style="margin-bottom: 10px;display: block;">话题内容*</label>
        <text-edit v-model="newTopic.topicContent"></text-edit>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="success" @click="publishTopic">发 布</el-button>
      </div>
    </el-dialog>
   <back-top></back-top>
  </div>
</template>

<script>
import { openLogin } from '../login/autologin'
import TopicCard from './TopicCard'
import RecommendTopic from './RecommendTopic'
import axios from 'axios'
import PagedList from '../../libs/PagedList.js'

export default {
  title: '话题',
  name: 'tipic-home',
  data () {
    return {
      tipics: new PagedList('/mscs/topic/findTopicBasicByType', 6),
      newTopic: {
        disable: 'NO', // 是否删除
        isComment: 'YES',
        status: 'RELEASE',
        isTop: '0',
        tags: '', // 标签组合
        topicLogo: '',
        topicTitle: '',
        topicTypeId: '0D6E88FE7F3511E8AC3FFA7DEC4CE400', // 类型
        topicTypeName: '', // 类型名称
        topicDescription: '',
        topicContent: ''
      },
      topicTypes: [
        {id: '0D6E88FE7F3511E8AC3FFA7DEC4CE400', name: '技术请教'},
        {id: '0D6E894F7F3511E8AC3FFA7DEC4CE400', name: '行业闲聊'},
        {id: '0D6E89647F3511E8AC3FFA7DEC4CE400', name: '干货分享'},
        {id: '0D6E89747F3511E8AC3FFA7DEC4CE400', name: '吐槽'},
        {id: '0D6E89947F3511E8AC3FFA7DEC4CE400', name: '其他'}
      ],
      keywords: '',
      type: '', // 话题类型
      show: false,
      isUp: true
    }
  },
  mounted () {
    this.newSearch()
  },
  methods: {
    newSearch () {
      this.tipics.search({type: this.type, search: this.keywords})
    },
    //
    releaseTopic () {
      if (!this.isLogin) {
        this.$openLogin()
        return
      }
      this.show = true
    },
    publishTopic () {
      let str = this.$html2str(this.newTopic.topicContent)
      let obj = Object.assign({}, this.newTopic)
      obj.topicDescription = str.substring(0, 150)
      obj.topicTypeName = this.getNameById(this.newTopic.topicTypeId)
      obj.userId = this.$store.state.user.user.user.userId
      axios.post('/mscs/topic/addTopic', obj).then(res => {
        if (res.data.code === 1) {
          this.newSearch()
          // this.topices.unshift(obj)
          this.$message({
            message: '发布成功',
            type: 'success'
          })
          this.show = false
        } else {
          this.$codeError(res)
        }
      }).catch(error => {
        this.$catchError(error)
      })

      // this.show = false
    },
    getNameById (id) {
      for (var i = 0; i < this.topicTypes.length; i++) {
        if (this.topicTypes[i].id === id) {
          return this.topicTypes[i].name
        }
      }
    },
    dialogClose () {
      this.$refs.upload.clearFiles()
      this.newTopic = {
        disable: 'NO', // 是否删除
        isComment: 'YES',
        status: 'RELEASE',
        isTop: '0',
        tags: '', // 标签组合
        topicLogo: '',
        topicTitle: '',
        topicTypeId: '0D6E88FE7F3511E8AC3FFA7DEC4CE400', // 类型
        topicTypeName: '', // 类型名称
        topicDescription: '',
        topicContent: ''
      }
    }
  },
  watch: {
    'type' () {
      this.newSearch()
    }
  },
  computed: {
    height () {
      let height = this.$store.state.height.client - this.$store.state.height.header - this.$store.state.height.footer
      return height < 500 ? 500 : height
    },
    isLogin () {
      return this.$store.state.user.isLogin
    },
  },
  components: {
    TopicCard,
    RecommendTopic
  }
}
</script>
<style lang="scss">
  #topic-home .el-container {
    justify-content: center;
  }
  .title-img {
    display: inline-block;
    .el-upload-dragger {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }
  }
  .topic-home-header {
    height: 130px!important;
    background-color: #edefea;
    margin-bottom: 50px;
    > .topic-home-search {
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 45px;
      display: flex;
      flex-direction: row;
      .el-input-group {
        // flex: 1;
        width: 1135px;
        button {
          color: #FFFFFF;
          background-color: #94C05A;
          border-radius: 0;
        }
      }
      > button {
        width: 150px;
        color: #FFFFFF;
        background-color: #94C05A;
        margin-left: 15px;
      }
    }
    >.topic-home-type {
      margin-left: 50%;
      transform: translateX(-50%);
      // width: 1300px;
      margin-top: 7px;
      color: #b6b7b4;
      .el-radio-button__inner {
        border: none!important;
        background-color: transparent;
        padding: 4px 20px;
        &:hover {
          color: #94C05A;
        }
        > span {
          padding: 8px 0;
          border-bottom: 2px solid transparent;
          display: inline-block;
        }
      }
      .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        color: #333333;
        background-color: #FFF;
        box-shadow: none;
        border: none;
        >span {
          border-bottom: 2px solid #94C05A;
        }
      }
    }
  }
</style>
